// 导入 Three.js 核心库（3D 渲染基础）
import * as THREE from "three";
// 导入轨道控制器（用于鼠标/触摸交互控制视角）
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
// 从本地文件导入地形网格模型（可能是通过 mesh.js 生成的 3D 地形几何体）
import mesh, { updatePotion } from "./mesh.js";

// 初始化 3D 场景容器（所有 3D 对象的根容器）
const scene = new THREE.Scene();

// 将导入的地形网格添加到场景中（核心渲染对象）
scene.add(mesh);

// 创建坐标轴辅助工具（红色=X轴，绿色=Y轴，蓝色=Z轴）
// 参数 200 表示坐标轴长度（辅助定位和调试）
const axesHelper = new THREE.AxesHelper(200);
// 将坐标轴添加到场景中
// scene.add(axesHelper);

// 获取浏览器窗口的宽度和高度（用于设置渲染器和相机的尺寸）
const width = window.innerWidth;
const height = window.innerHeight;

// 创建透视相机（模拟人眼视角的 3D 相机）
// 参数 1：垂直视角（60°）；参数 2：宽高比（窗口宽高比）；参数 3/4：近/远裁剪面（仅渲染该范围内的物体）
const camera = new THREE.PerspectiveCamera(60, width / height, 1, 10000);
// 设置相机位置（X=200, Y=200, Z=200，位于场景外右上方）
camera.position.set(450, 150, 100);
// 相机看向场景原点（0,0,0），确保地形在视野中心
camera.lookAt(0, 0, 0);

// 初始化 WebGL 渲染器（负责将 3D 场景渲染为 2D 图像）
const renderer = new THREE.WebGLRenderer();
// 设置渲染器的输出尺寸（适配浏览器窗口大小）
renderer.setSize(width, height);

// 定义渲染循环函数（持续更新并渲染画面）
function render() {
  updatePotion();
  mesh.rotateZ(0.001);
  // 执行渲染：将场景通过相机视角渲染到画布上
  renderer.render(scene, camera);
  // 浏览器下一帧时递归调用 render，实现动画更新
  requestAnimationFrame(render);
}

// 启动渲染循环（首次调用触发动画）
render();

// 将渲染器生成的 Canvas 画布添加到网页的 body 中（显示 3D 内容）
document.body.append(renderer.domElement);

// 初始化轨道控制器（绑定相机和画布，允许鼠标拖动旋转、滚动缩放、右键平移视角）
const controls = new OrbitControls(camera, renderer.domElement);
controls.addEventListener("change", () => {
  //   console.log(camera.position);
});
